<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>litetalk</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery.min.js"></script>
        <script src="js/common.js"></script>
    </head>
    <body>
        <div class="papper-box">
            <div class="button-box">
                <div id="btn"></div>
                <button type="button" class="toggle-btn" onclick="login()">Login</button>
                <button type="button" class="toggle-btn" onclick="register()">Register</button>
            </div>
            <form class="form-box" onsubmit="return Doit()">
                <div class="txtb">
                    <input type="text" class="inUsername" aria-label="username">
                    <span data-placeholder="Username"></span>
                </div>
                <div class="txtb">
                    <input type="password" class="inPassword" aria-label="password">
                    <span data-placeholder="Password"></span>
                </div>
                <div class="txtb confirm-box" hidden="true">
                    <input type="password" class="inConfirm" aria-label="confirm">
                    <span data-placeholder="Confirm"></span>
                </div>
                <input type="submit" class="doBtn" value="Login">
            </form>
        </div>
        <script type="text/javascript">
            $(".txtb input").on("focus", function(){
                $(this).addClass("focus");
            });
            $(".txtb input").on("blur", function(){
                if($(this).val() == "")
                    $(this).removeClass("focus")
            });
            var State = 1

            function Doit(){
                var username = $(".inUsername").val();
                if (username=="") {
                    alert("用户名不能为空！");
                    return false
                };
                var password=$(".inPassword").val();
                if (password==""){
                    alter("密码不能为空！");
                    return false;
                }
                if (State == 1){
                    DoLogin(username, password)
                } else {
                    var confirm=$(".inConfirm").val();
                    if (confirm != password) {
                        alter("两次密码输入不同。");
                        return false;
                    }
                    DoRegister(username, password)
                }
                return false;
            }

            function login(){
                $(".confirm-box").fadeOut(100);
                $("#btn").css("left", "0px");
                $(".doBtn").val("Login")
                State = 1;
            }

            function register(){
                $(".confirm-box").fadeIn(100);
                $("#btn").css("left", "110px");
                $(".doBtn").val("Register")
                State = 2;
            }

            function DoLogin(name, passwd){
                reqStr = JSON.stringify({
                    userName: name,
                    passWord: passwd
                });

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: apiUrl+"/user/login",
                    data: reqStr,
                    success: function(e){
                        if (e.code == 0) {
                            UserInfo = e.Info;
                            setLocal("authToken", e.data.AuthToken);
                            window.location.href = "/index.html";
                        } else {
                            alert("error:" + e.message);
                        }
                    },
                    error: function(){
                        alert("exception! ");
                    }
                });
            }

            function DoRegister(name, passwd) {
                reqStr = JSON.stringify({
                    userName: name,
                    passWord: passwd
                });
                $.ajax({
                    type:"POST",
                    dataType:"json",
                    url:apiUrl+"/user/register",
                    data:reqStr,
                    success:function(e){
                        if (e.code == 0) {
                            alert("注册成功。");
                            setLocal("authToken", e.data);
                            window.location.href = "/index.html";
                        } else {
                            alert("error:" + e.message);
                        }
                    },
                    error:function(){
                    }
                });
            }
        </script>
    </body>
</html>